<template>
<el-avatar icon="el-icon-user-solid" :src="avatar" :style="currentStyle" size="large" shape="circle"  fit="fill"></el-avatar>

</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "",
});
</script>

<script setup lang="ts">
import {ref} from 'vue'
const props = defineProps(['avatar','asize'])
const { avatar,asize } = props

const avatarSize = ref({
    'big': { width: '120px', height: '120px' },
    'middle': { width: '100px', height: '100px' },
    'small':{width:'30px',height:'30px'}
})
const currentStyle = asize==='big'?avatarSize.value.big:asize==='middle'?avatarSize.value.middle:avatarSize.value.small
</script>

<style scoped lang="less" >
    .avatar{
        width: 120px;
        height: 120px;
    }
</style>